<template>

  <h2>学时排行</h2>
  <!-- 头部 -->
  <el-row class="header-h1">
    <el-col :span="2">
      <span>
        时间 : </span>
    </el-col>
    <!-- 时间插件 -->
    <el-col :span="8">
      <div class="demo-date-picker">
        <div class="block">
          <el-config-provider :locale="locale">
            <el-date-picker v-model="value1"
                            type="daterange"
                            range-separator="To"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            value-format="YYYY-MM-DD " />
          </el-config-provider>
        </div>
      </div>

    </el-col>
    <!-- 查询按钮 -->
    <el-col :span="3">
      <el-button type="primary"
                 size="large "
                 class="seach-btn"
                 @click="seachBtn">查询</el-button>
    </el-col>

  </el-row>
  <!-- 表格 -->
  <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            style="width: 100%"
            :default-sort="{ prop: 'user_studyTime', order: 'descending' }">
    <el-table-column prop="user_id"
                     label="用户ID"
                     width="180" />
    <el-table-column align="center"
                     prop="user_name"
                     label="用户名称"
                     width="180" />
    <el-table-column align="center"
                     prop="user_iphone"
                     label="用户手机号" />
    <el-table-column align="center"
                     sortable
                     prop="user_studyTime"
                     label="累计打卡时长" />
    <el-table-column align="center"
                     prop="user_dateTime"
                     label="用户时间" />
    <el-table-column align="center"
                     prop="operations"
                     label="操作">
      <template #default="scope">

        <el-button size="large"
                   type="success"
                   @click="handleDelete(scope.$index, scope.row)">查看打卡记录</el-button>
      </template>
    </el-table-column>

  </el-table>
  <div class="page">
    <el-pagination v-model:currentPage="currentPage"
                   v-model:page-size="pageSize"
                   :page-sizes="[ 2, 5, 6]"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="tableData.length" />
  </div>
</template>

<script  setup>

import { useRouter } from "vue-router";
import { ref, onMounted, reactive } from 'vue'
import axios from "../../utils/http"
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
const pageSize = ref(2);
const currentPage = ref(1);
const locale = ref(zhCn) //日期插件转换为中文

const router = useRouter();
const seachBtn = () => {
  console.log(value1._rawValue[0]);//拿到查询的时间
  console.log(typeof value1._rawValue[0]);//string
  axios({
    url: 'getDatequery',
    method: 'get',
    params: {
      user_statrTime: value1._rawValue[0],
      user_endTime: value1._rawValue[1],
      //  user_endTime: value1._rawValue[1].trim(),

    }
  }).then(res => {
    console.log('查询成功');
    tableData.value = res.data.data
  })
}
const value1 = ref('')
const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  }]

//表格数据
const tableData = ref([
  {
    user_id: '',
    user_name: '',
    user_iphone: '',
    user_dateTime: '',
    user_studyTime: '',
  }
])

//请求表格数据
const getUserTime = () => {
  axios({
    url: '/getUserTime',
    method: 'get',
  }).then(res => {
    console.log(res.data.data);
    if (res.data.code == 200) {
      console.log('获取数据成功');
      tableData.value = res.data.data
    }
  }).catch(error => console.log(error))
}

onMounted(() => {

  getUserTime()
})

//打卡
const handleDelete = (index, row) => {
  console.log(index, row)
  router.push(`./cardhistory?user_id=${row.user_id}&user_iphone=${row.user_iphone}`)
}
</script>

<style scoped>
.header-h1 {
  font-size: 20px;
  height: 50px;
  background-color: #d7d7d7;
  line-height: 50px;
  text-align: center;
}

.seach-btn {
  width: 100px;
  font-size: 18px;
  line-height: 50px;
  height: 40px;
}
h2 {
  margin: none;
  font-size: 18px;
}
.page {
  margin: auto;
  padding-left: 33%;
}
</style>